<template>
  <Card dis-hover :bordered="false">
    <Form inline :label-width="0" @submit.native.prevent>
      <Row>
        <Col span="22">
          <FormItem>
            <Input
              v-width="160"
              placeholder="请输入姓名、手机号"
              v-model="params.keywords"
              @on-clear="searchData"
              @on-enter="searchData"
              clearable
            />
          </FormItem>
          <FormItem>
            <Select
              v-width="110"
              placeholder="代言人"
              v-model="params.spoker_id"
              @on-change="searchData"
              @on-open-change="showAll"
              :filterable="spokerList.length >= 10"
              clearable
            >
              <Option
                v-for="item in spokerList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>

          <FormItem>
            <Select
              v-width="110"
              placeholder="请选择状态"
              v-model="params.data_status"
              @on-change="searchData"
              clearable
            >
              <Option
                v-for="item in statusList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>

          <FormItem>
            <Checkbox v-model="params.eky_repeat" @on-change="searchData"
              >重复数据</Checkbox
            >
          </FormItem>
        </Col>
      </Row>
    </Form>
    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      :max-height="tableHeigth"
      @on-sort-change="sortChange"
    >
      <template #title="{ row }">
        <span @click="handleView(row)" class="view"
          >{{ row.name }}
          <Icon
            type="ios-browsers-outline"
            v-show="row.eky_repeat == 1 && row.eky_confirm == 0"
        /></span>
      </template>

      <template #data_status_str="{ row }">
        <Tag
          type="border"
          :color="
            row.data_status == '3'
              ? 'success'
              : row.data_status == '2'
              ? 'warning'
              : 'primary'
          "
          >{{ row.data_status_str }}</Tag
        >
      </template>
      <template #action="{ row }">
        <span v-if="row.eky_repeat == 1 && row.eky_confirm == 0">
          <a
            @click="handleRelation(row.id)"
            v-hasC="{
              name: 'v1-patient-patient-connect',
              flag: 'v1/patient/patient/connect',
            }"
            >关联</a
          >
          <Divider
            type="vertical"
            v-hasC="{
              name: 'v1-patient-patient-delete',
              flag: 'v1/patient/patient/delete',
            }"
          />
          <a
            @click="handleDel(row.id)"
            v-hasC="{
              name: 'v1-patient-patient-delete',
              flag: 'v1/patient/patient/delete',
            }"
            class="del"
            >删除</a
          >
        </span>
      </template>
    </Table>
    <Page
      class="ivu-mt-16"
      :total="total"
      :modelValue="params.current"
      :page-size="params.size"
      :page-size-opts="pageOpts"
      show-total
      show-sizer
      @on-change="changePage"
      @on-page-size-change="changepageSize"
    />
    <detial
      :showPre="showPre"
      :contentId="contentId"
      @closePreModal="closePreModal"
    />
  </Card>
</template>
<script>
import detial from "./detial";
import { patientList, patientConnect, patientDel } from "@api/client.js";
export default {
  name: "client",
  components: { detial },
  data() {
    return {
      tableHeigth: document.body.clientHeight - 270,
      showPre: false,
      contentId: "",
      params: {
        keywords: "",
        spoker_id: "",
        data_status: "",
        eky_repeat: "",
        order_column: "",
        order_sort: "",
        current: 1,
        size: 10,
      },
      statusList: [],
      spokerList: [],
      total: 0,
      pageOpts: [10, 20, 30, 40],
      columns: [
        {
          slot: "title",
          title: "姓名",
        },
        {
          key: "mobile",
          title: "电话",
        },
        {
          key: "spoker_name",
          title: "代言人",
        },
        {
          key: "type_str",
          title: "客户类型",
        },
        {
          slot: "data_status_str",
          title: "状态",
        },
        {
          key: "arrive_num",
          title: "到院次数",
        },
        {
          key: "sale_money",
          title: "消费金额",
        },
        {
          key: "created_at_str",
          title: "创建日期",
        },

        {
          slot: "action",
          title: "操作",
          width: 120,
        },
      ],
      list: [],
      loading: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    showAll(e) {
      if (e) {
        let downList = document.querySelectorAll(
          ".ivu-select-dropdown-list .ivu-select-item"
        );
        downList.forEach((item) => {
          item.style.display = "block";
        });
      }
    },
    sortChange(e) {
      this.params.order_column = e.key.replace(/_str$/, "");
      this.params.order_sort = e.order;
      this.getData();
    },
    //切换page
    changePage(index) {
      this.params.current = index;
      this.getData();
    },
    changepageSize(val) {
      this.params.size = val;
      this.getData();
    },
    handleRelation(index) {
      this.$Modal.confirm({
        title: "关联提示",
        content: "请确定已经在E看牙上修改过归属人和渠道，否则关联不成功",
        onOk: () => {
          patientConnect({ id: index }).then(() => {
            this.$Message.success("关联成功");
            this.getData();
          });
        },
      });
    },
    handleDel(index) {
      this.$Modal.confirm({
        title: "删除提示",
        content: "是否确认删除此条记录，删除后不可恢复",
        onOk: () => {
          patientDel({ id: index })
            .then(() => {
              this.$Message.success("删除成功");
              this.getData();
            })
            .catch(() => {});
        },
      });
    },
    handleView(info) {
      this.showPre = true;
      this.contentId = info.id;
    },
    closePreModal(state) {
      this.showPre = state;
    },
    getData() {
      this.loading = true;
      const params = {
        keywords: this.params.keywords,
        spoker_id: this.params.spoker_id,
        eky_repeat: this.params.eky_repeat ? "1" : "",
        order_sort: this.params.order_sort,
        order_column: this.params.order_column,
        data_status: this.params.data_status,
        pageSize: this.params.size,
        page: this.params.current,
      };
      patientList(params)
        .then((res) => {
          this.spokerList = res.condition.spoker_arr;
          this.statusList = res.condition.status_arr;
          this.list = res.list.list;
          this.total = res.list.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    searchData() {
      this.params.current = 1;
      this.getData();
    },
  },
};
</script>
<style lang="less" scoped>
.view {
  color: #2d8cf0;
  cursor: pointer;
  word-break: break-all;
}
:deep(.ivu-table-cell) {
  word-break: keep-all;
}
</style>
